<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <span>{{message}}</span>
            <!-- 1. v-once指令能执行一次性的插值,数据改变时插值处不会更新 -->
            <span v-once>{{message}}</span>
            <!-- 2. 原始HTML v-html指令需要加在标签上-->
            <p>使用 mustaches: {{rawHtml}}</p>
            <p v-html="rawHtml"></p>
            <!-- 3. v-bind绑定属性 -->
            <div v-bind:class="style">看到我了吗！</div>
            <!-- 4. JavaScript表达式 -->
            <span>{{msg+2}}</span>
            <span>{{isReal ? 'YES' : 'NO'}}</span>
            <span>{{result.split('').reverse().join('')}}</span>
            <div v-bind:id="'list-'+id">123</div>
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hey we go!',
                    rawHtml: '<span style= "color:red">This is be red</span>',
                    style: 'green',
                    msg: 2018,
                    isReal: true,
                    result: 'JohnYehyo',
                    id: 'en',
                },
            });
            vm.message = 'no no no';
            setTimeout(() => {
                vm.style = 'yellow';
            }, 300);
        </script>
        <style>
            .green {
                color: green;
                font-size: 100px;
            }

            .yellow {
                color: yellow;
                font-size: 50px;
            }
        </style>
    </body>
</html>
